<%--
  Created by IntelliJ IDEA.
  User: shun
  Date: 2018/8/6
  Time: 9:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">

    <title>投票页面</title>

    <!-- Bootstrap core CSS -->
    <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="${pageContext.request.contextPath}/bootstrap/css/justified-nav.css" rel="stylesheet">

    <!-- layer -->
    <link href="${pageContext.request.contextPath}/layer/skin/default/layer.css" rel="stylesheet">

    <%--sweet alert--%>
    <link href="https://cdn.bootcss.com/limonte-sweetalert2/7.21.1/sweetalert2.min.css" rel="stylesheet">

</head>

<body>

<!-- Modal -->
<%--模态框--%>
<div class="modal fade" id="showVoteResultModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">投票结果</h4>
            </div>
            <div class="modal-body">
                <div id="main" style="width: 400px;height:400px;"></div>
            </div>
            <%--<div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>--%>
        </div>
    </div>
</div>

<%--图表--%>
<%--<div id="main" style="width: 600px;height:400px;"></div>--%>

<div class="container">

    <!-- The justified navigation menu is meant for single line per list item.
         Multiple lines will require custom code not provided by Bootstrap. -->
    <div class="masthead">
        <nav>
            <ul class="nav nav-justified" id="channel">
                <%--<li class="active"><a href="#">Home</a></li>--%>
            </ul>
        </nav>
    </div>

    <br>
    <%--<form id="voteForm">--%>
    <div id="voteDiv">
        <h3>欢迎来到投多多投票页面,请选中上边的频道进行投票操作</h3>
    </div>
        <%--<h3>你最喜欢的NBA球队是哪一个</h3>
        <!-- 投票选项 -->
        <div class="radio">
            <label>
                <input type="radio" name="voteOption" value="option1">
                魔术
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="voteOption" value="option1">
                76人
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="voteOption" value="option1">
                湖人
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="voteOption" value="option1">
                其他
            </label>
        </div>
        <div class="form-group">
            <input type="text" name="otherOption">
            <input class="btn btn-default" type="button" value="查看投票结果">
        </div>--%>
   <%-- </form>--%>
    <%--<p><a class="btn btn-lg btn-success" href="#" role="button">进行投票</a></p>--%>
</div>
<%--<form id="form3" action="#" method="post">
    <input type="text" name="name" value="123">
</form>--%>
<!-- jQuery -->
<script src="${pageContext.request.contextPath}/jquery/jquery-2.1.1.min.js" type="application/javascript"></script>

<!-- layer -->
<script src="${pageContext.request.contextPath}/layer/layer.js"></script>

<%--sweet alert js--%>
<script src="https://cdn.bootcss.com/limonte-sweetalert2/7.21.1/sweetalert2.min.js"></script>

<%--bootstrap js--%>
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>

<%--echarts--%>
<script src="${pageContext.request.contextPath}/echarts/echarts.js"></script>

<script type="application/javascript">
    // 页面加载函数
    $(function () {
        // 异步获取所有投票频道
        $.ajax({
           type : "POST",
           url : "${pageContext.request.contextPath}/channel/list.do",
           success : function (result) {
                // 判断是否获得数据
               if (result.success){
                   var chanelContent = '';
                   // 获得
                   // 循环拼接
                   $.each(result.data, function (i, n) {
                       chanelContent += '<li id="'+n.channelID+'"><a href="#" onclick="loadVoteByChID('+n.channelID+')">'+n.channelName+'</a></li>';
                   });
                   // 将拼接好的数据加到ul中
                   $("#channel").html(chanelContent);
               } else {
                   // 没有获得
                   layer.msg(result.message, {time:1000, icon:5, shift:6});
               }
           },
            error : function () {
                // 弹出请求失败的弹窗
                layer.msg('请求失败', {time:1000, icon:5, shift:6});
            }
        });
    });

    function loadVoteByChID(cid) {
        // 将cid定义成全局变量
        channelID = cid;
        // 根据频道id异步加载投票
        $.ajax({
           type : "POST",
           url : "${pageContext.request.contextPath}/vote/queryVoteResultsByCID.do",
           data : {channelID:cid},
           success : function (result) {
               // 判断是否成功
               if (result.success) {
                   // 将当前频道标为选中项
                   var lis = $("#channel li");
                   $.each(lis, function (i, n) {
                       if (n.id == cid) {
                           $(n).prop("class", "active");
                       } else {
                           $(n).prop("class", "");
                       }
                   });
                   var voteContent = '';
                   // 判断是否有投票信息
                   // 成功
                   if (result.data != null && result.data != ''){
                       $.each(result.data, function (i, n) {
                           voteContent += '<form id="form'+i+'" action="" method="post">';
                           voteContent += '<h3>'+n.vote.voteName+'</h3>';
                           for (var j = 0; j < n.voteOptions.length; ++j){
                               voteContent += '<div class="radio">';
                               voteContent += '	<label>';
                               voteContent += '		<input type="radio" name="voteOptionID" value="'+n.voteOptions[j].voteOptionID+'">';
                               voteContent += n.voteOptions[j].voteOptionName;
                               voteContent += '	</label>';
                               voteContent += '</div>';
                           }
                           voteContent += '<div class="radio">                                                    ';
                           voteContent += '	<label>                                                            ';
                           voteContent += '		<input type="radio" name="voteOptionID" value="0">         ';
                           voteContent += '		其他                                                           ';
                           voteContent += '	</label>                                                           ';
                           voteContent += '</div>                                                                 ';
                           voteContent += '<div class="form-group">                                               ';
                           voteContent += '	<input type="text" name="otherOption">                             ';
                           voteContent += '<input type="hidden" name="voteID" value="'+n.vote.voteID+'">';
                           //voteContent += '<input type="hidden" name="channelID" value="'+n.vote.channelID+'">';
                           voteContent += '	<input class="btn btn-default" type="button" value="查看投票结果" onclick="showVoteResultBtn('+n.vote.voteID+')"> ';
                           voteContent += '</div>                                                                 ';
                           voteContent += '<p><a class="btn btn-lg btn-success" href="#" role="button" onclick="doVote(\'form\'+'+i+')">进行投票</a></p>';
                           voteContent += '</form>';
                       });
                   } else {
                       voteContent += '<h3>没有任何投票内容</h3>';
                   }
                   $("#voteDiv").html(voteContent);
               } else {
                   layer.msg(result.message, {time:1000, icon:5, shift:6});
               }
           } ,
            error : function () {
                // 弹出请求失败的弹窗
                layer.msg('请求失败', {time:1000, icon:5, shift:6});
            }
        });
    }


    // 为投票按钮绑定单击事件
    function doVote(formID) {
        // 将表单数据序列化,用以异步提交
        var formData = $("#"+formID).serialize();
        // 判断用户是否选中了某个投票选项
        if (formData.indexOf("voteOption") == -1) {
            // 没有投票选项被选中
            // 弹出错误弹窗
            swal({
                type: 'error',
                title: '请选择',
                text: '至少选中一个选项进行投票',
            })
            return false;
        }

        // 异步提交
        $.ajax({
           type : "POST",
            url : "${pageContext.request.contextPath}/vote/doVote.do",
            data : formData,
            success : function (result) {
                // 判断是否投票成功
                if (result.success) {
                    // 成功
                    swal(
                        '恭喜你',
                        result.message,
                        'success'
                    )

                    // 重新刷新页面
                    loadVoteByChID(channelID);
                } else {
                    // 失败
                    swal(
                        '很遗憾',
                        result.message,
                        'error'
                    )
                }
            },
            error : function () {
                // 失败
                swal(
                    '很遗憾',
                    '请求失败',
                    'error'
                )
            }
        });
    }

    // 为查看投票结果按钮绑定函数
    function showVoteResultBtn(voteID) {

        $('#showVoteResultModel').modal();

        // 异步加载投票信息,根据voteID
        $.ajax({
           type : "POST",
           url : "${pageContext.request.contextPath}/vote/getVoteResultByVoteID.do",
           data : {"voteID":voteID},
           success : function (result) {
               // 判断是否载入成功
               if (result.success) {
                   // 成功
                   // 获得传递回来的json数据
                   var voteResult = result.data;

                   // 取出投票选项,放到数组中
                   var voteOptionNames = [];
                   // 取出票数放到数组中
                   var voteOptionTicketNums = [];

                   $.each(voteResult.voteOptions, function (i, n) {
                       voteOptionNames.push(n.voteOptionName);
                       voteOptionTicketNums.push(n.ticketNum);
                       //alert(n.ticketNum);
                   })

                   //alert(voteOptionTicketNums);
                   // 基于准备好的dom，初始化echarts实例
                   var myChart = echarts.init(document.getElementById('main'));

                   // 指定图表的配置项和数据
                   var option = {
                       /*title: {
                           text: voteResult.vote.voteName
                       },*/
                       tooltip: {},
                       legend: {
                           data:['票数']
                       },
                       xAxis: {
                           data: voteOptionNames
                       },
                       yAxis: {},
                       series: [{
                           name: '票数',
                           type: 'bar',
                           data: voteOptionTicketNums
                       }]
                   };

                   // 使用刚指定的配置项和数据显示图表。
                   myChart.setOption(option);
               } else {
                   // 失败
                   swal(
                       '很遗憾',
                       result.message,
                       'error'
                   )
               }
           },
            error : function () {
                // 失败
                swal(
                    '很遗憾',
                    '请求失败',
                    'error'
                )
            }
        });
    }
</script>
</body>
</html>

